<template>
	<view class="detail-container">
		<!-- 顶部背景图 -->
		<view class="image-wrapper">
			<image class="top-bg-img" :src="$xyfun.image(course.poster)" mode="widthFix" />
		</view>

		<!-- 课程信息 -->
		<view class="info-section">
			<view class="info-title">
				<text class="label">课程名称</text>
				<text class="value">/ {{ course.title }}</text>
			</view>
			<view class="info-row">
				<text class="label">课程介绍：</text>
				<text class="highlight">{{ highlightText }}</text>
				<text class="desc">{{ descText }}</text>
			</view>
			<view class="info-row">
				<text class="label">预约方式：</text>
				<text class="desc">{{ course.reservation_method || '人工电话客服，预约课程' }}</text>
			</view>
			<view class="info-row">
				<text class="label">课程概况：</text>
				<text class="desc">{{ course.overview }}</text>
			</view>
			<view class="info-row">
				<text class="label">课程目的：</text>
			</view>
			<view class="info-list">
				<text class="desc" v-for="(line, index) in (course.goal || '').split('\n')" :key="index">
					{{ line }}
				</text>
			</view>
		</view>

		<!-- 底部价格和按钮 -->
		<!-- 底部价格和按钮 -->
		<view class="bottom-bar">
			<text class="price">￥{{ course.price }}</text>
			<button class="buy-btn" @tap="showPayPopup = true">现在购买</button>
		</view>
		<!-- 支付方式弹窗 -->
		<view v-if="showPayPopup" class="pay-popup-mask" @tap.self="showPayPopup = false">
			<view class="pay-popup">
				<view class="pay-title">选择支付方式</view>
				<view class="pay-list">
					<view class="item flex p-30 m-b-2 lh-50 bc-w" v-for="(item, index) in payList" :key="index"
						v-if="item.state">
						<view class="l flex">
							<text :class="'xyicon icon-' + item.icon + ' ts-40 m-r-15 lh-40 p-t-5'"></text>
							<text class="lh-50">{{ item.name }}</text>
						</view>
						<view class="r tb m-l-auto" @tap="payMethodSelect(index)">
							<text class="xyicon icon-radio-a ts-32 lh-50" v-if="item.select"></text>
							<text class="xyicon icon-radio ts-32 lh-50" v-else></text>
						</view>
					</view>
				</view>
				<button class="buy-btn" @tap="subPay">确认支付</button>
			</view>
		</view>
	</view>
</template>


<script>
	export default {
		data() {
			return {
				courseId: 0,
				course: {}, // 课程详情数据
				showPayPopup: false,
				orderDetail: null,
				disabled: false,
				payList: [{
						name: '余额支付',
						method: 'balance',
						icon: 'balance',
						state: true,
						select: false
					},
					{
						name: '微信支付',
						method: 'wechat',
						icon: 'wechat',
						state: true,
						select: true
					}
				]
			};
		},
		computed: {
			// 提取高亮部分（“节”字前）
			highlightText() {
				const desc = this.course.description || '';
				const jieIndex = desc.indexOf('节');
				if (jieIndex !== -1) {
					return desc.slice(0, jieIndex + 1); // 包含“节”
				}
				return '';
			},
			// 提取剩余描述部分
			descText() {
				const desc = this.course.description || '';
				const jieIndex = desc.indexOf('节');
				if (jieIndex !== -1) {
					return desc.slice(jieIndex + 1).trim();
				}
				return desc;
			}
		},
		onLoad(options) {
			if (options.id) {
				this.courseId = options.id;
				this.loadCourseDetail();
			}
		},
		methods: {
			loadCourseDetail() {
				this.$api.post({
					url: '/private_session/courseDetail',
					data: {
						id: this.courseId
					},
					success: res => {
						this.course = res || {};
					}
				});
			},
			// 选择支付方式
			payMethodSelect(index) {
				this.payList.forEach((item, i) => {
					item.select = i === index;
				});
			},
			// 确认支付
			subPay() {
				if (this.disabled) return;
				const selected = this.payList.find(item => item.select);
				if (!selected) return this.$xyfun.msg('请选择支付方式');
				const pay_type = selected.method;

				this.disabled = true;

				// 第一步：调用创建订单接口
				this.$xyfun.storeId().then(store_id => {
					this.$api.post({
						url: '/private_session/createPrivateCourseOrder',
						data: {
							course_id: this.courseId,
							store_id: store_id
						},
						success: res => {
							this.orderDetail = res;

							// 第二步：调用支付接口
							if (pay_type === 'wechat') {
								this.$api.post({
									url: '/Shande/payPrivateCourseOrder',
									data: {
										orderjson: this.orderDetail
									},
									success: res => {
										const jsonData = JSON.parse(res.data);
										const payData = JSON.parse(jsonData.pay_data);

										uni.requestPayment({
											appId: payData.appId,
											nonceStr: payData.nonceStr,
											package: payData.package,
											paySign: payData.paySign,
											signType: payData.signType,
											timeStamp: payData.timeStamp,
											success: () => {
												uni.showModal({
													content: "支付成功，预约成功",
													showCancel: false,
													success: () => {
														uni.redirectTo({
															url: '/pages/course/order'
														});
													}
												});
											},
											fail: err => {
												uni.showModal({
													content: "支付失败,已取消",
													showCancel: false
												});
											},
											complete: () => {
												this.disabled = false;
												this.showPayPopup = false;
											}
										});
									}
								});
							} else {
								// 余额支付
								this.$api.post({
									url: '/private_session/balancePay',
									data: {
										order_sn: this.orderDetail.order_sn,
										payment: 'balance',
										order_type: 'order',
										user_id: uni.getStorageSync('xyvenue:user').id,
										store_id: store_id,
										amount: this.orderDetail.total_fee
									},
									success: () => {
										uni.showToast({
											title: '余额支付成功',
											icon: 'success'
										});
										this.showPayPopup = false;
										setTimeout(() => {
											uni.redirectTo({
												url: '/pages/course/order'
											});
										}, 1500);
									},
									fail: (res) => {
										uni.showToast({
											title: res.msg || '余额支付失败',
											icon: 'error'
										});
										this.disabled = false;
									}
								});
							}
						},
						fail: () => {
							this.disabled = false;
							this.$xyfun.msg('下单失败，请重试');
						}
					});
				});
			},
			// 在课程详情页中
		}
	};
</script>


<style lang="scss" scoped>
	.detail-container {
		background: #f8f8f8;
		min-height: 100vh;
		padding-bottom: 120rpx;
	}

	.image-wrapper {
		padding: 24rpx;
		/* 四周留白距离，可调整 */
		box-sizing: border-box;
		/* 让 padding 不影响总宽度 */

	}

	.top-bg-img {
		width: 90%;
		/* 宽度占满 wrapper */
		height: auto;
		/* 高度按比例 */
		border-radius: 32rpx;
		/* 四角圆角 */
		display: block;
		margin: 0 auto;
	}

	.info-section {
		background: #fff;
		border-radius: 24rpx;
		margin: 0 24rpx 24rpx 24rpx;
		padding: 32rpx 24rpx 24rpx 24rpx;

		.info-title {
			font-size: 30rpx;
			font-weight: bold;
			color: #222;
			margin-bottom: 18rpx;

			.label {
				color: #222;
				font-weight: bold;
			}

			.value {
				color: #222;
				margin-left: 8rpx;
			}
		}

		.info-row {
			font-size: 26rpx;
			color: #222;
			margin-bottom: 12rpx;

			.label {
				color: #222;
				font-weight: bold;
			}

			.highlight {
				color: #fe5a35;
				font-weight: bold;
				margin-right: 4rpx;
			}

			.desc {
				color: #666;
			}
		}

		.info-list {
			display: flex;
			flex-direction: column;
			gap: 6rpx;

			.desc {
				color: #999;
				font-size: 24rpx;
				line-height: 1.6;
			}
		}
	}

	.bottom-bar {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100vw;
		height: 120rpx;
		background: #fff;
		display: flex;
		align-items: center;
		justify-content: space-between;
		box-shadow: 0 -2rpx 8rpx rgba(0, 0, 0, 0.04);
		padding: 0 32rpx;
		z-index: 10;
		border-top: 1px solid #eee;
	}

	.price {
		color: #ff6347;
		font-size: 40rpx;
		font-weight: bold;
	}

	.buy-btn {
		background: #ff4500;
		color: #fff;
		font-size: 32rpx;
		border-radius: 50rpx;
		padding: 0 70rpx;
		height: 72rpx;
		line-height: 72rpx;
		border: none;
		margin-right: 55rpx;
	}

	.pay-popup-mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.6);
		z-index: 999;
		display: flex;
		align-items: flex-end;
	}

	.pay-popup {
		background-color: #fff;
		width: 100%;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
		padding: 30rpx;
	}

	.pay-title {
		font-size: 30rpx;
		font-weight: bold;
		margin-bottom: 20rpx;
	}

	.pay-list .item {
		border-bottom: 1rpx solid #f2f2f2;
	}
</style>